<template>
  <el-card shadow="never"
           class="aui-card--fill">
      <el-form :inline="true"
               :model="dataForm">
        <el-form-item>
          <el-input v-model="dataForm.email"
                    :placeholder="$t('custom.rrweb.email')"
                    clearable></el-input>
        </el-form-item>
        <el-form-item>
        <el-date-picker v-model="dataForm.daterange"
                        type="datetimerange"
                        :range-separator="$t('datePicker.range')"
                        :start-placeholder="$t('datePicker.start')"
                        :end-placeholder="$t('datePicker.end')">
        </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small"
                     @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small"
                     @click="showReplayer = true">{{ $t('custom.rrweb.replay') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading"
                :data="dataList"
                border
                style="width: 100%;">
        <el-table-column type="selection"
                         header-align="center"
                         align="center"
                         width="50"></el-table-column>
        <el-table-column prop="id"
                         :label="$t('custom.rrweb.id')"
                         header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="userid"
                         :label="$t('custom.rrweb.userId')"
                         header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="email"
                         :label="$t('custom.rrweb.email')"
                         header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="createdon"
                         :label="$t('custom.rrweb.createdOn')"
                         header-align="center"
                         align="center">
                          <template slot-scope="scope">
                            {{ scope.row.createdon | ClientFormat }}
                          </template>
                        </el-table-column>
      </el-table>
      <el-pagination background
                      :layout="pageOptions.layout"
                      @current-change="pageCurrentChangeHandle"
                      @size-change="pageSizeChangeHandle"
                      :page-sizes="$store.state.app.pageOptions.pageSizes"
                      :pager-count="$store.state.app.pageOptions.pageCount"
                      :current-page="pageOptions.currentPage"
                      :total="pageOptions.total">
      </el-pagination>
      <el-drawer ref="rrwebdialogue"
                title=""
                :visible.sync="showReplayer"
                @opened="reply"
                size="80%"
                style="position:fixed;width:100%;height:100%;top:0;left:0;z-index:2013;" >
        <div v-loading="rrwebPlayerLoading"
            class="demo-drawer__content">
          <div v-if="showReplayer" id="rrweb-player" style="width: 100%; margin: 15px;" >
          </div>
        </div>
      </el-drawer>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/simplereport-view-module'
import moment from 'moment'
//  import RRwebPlayer from 'rrweb-player'
// "rrweb": "^0.9.0",
// "rrweb-player": "^0.5.2",
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      dataList: [],
      dataListLoading: false,
      showReplayer: false,
      rrwebPlayerLoading: false,
      dataForm: {
        email: null,
        daterange: null
      },
      pageOptions: {
        currentPage: 1,
        pageSizes: [10, 50, 100, 200, 1000],
        pageSize: 10,
        total: 0,
        layout: 'total, sizes, prev, pager, next, jumper'
      },
      replayer: null
    }
  },
  methods: {
    pageSizeChangeHandle (val) {
      this.current = 1
      this.pageOptions.currentPage = 1
      this.pageOptions.pageSize = val
      this.getDataList()
    },
    pageCurrentChangeHandle (val) {
      this.pageOptions.currentPage = val
      this.current = val
      this.getDataList()
    },
    getDataList () {
      var _self = this

      var dateTimeFrom = null
      var dateTimeTo = null

      if (_self.dataForm.daterange) {
        dateTimeFrom = moment(this.dataForm.daterange[0]).utc().format('YYYY-MM-DD HH:mm:ss')
        dateTimeTo = moment(this.dataForm.daterange[1]).utc().format('YYYY-MM-DD HH:mm:ss')
      }

      if (!dateTimeFrom || !dateTimeTo || !_self.dataForm.email) {
        _self.dataListLoading = false
        return this.$message.warning('Missing parameters.')
      }

      _self.dataListLoading = true
      _self.getDatCount(dateTimeFrom, dateTimeTo)

      const params = `
        query MyQuery {
          event(where: { email: {_eq: "${_self.dataForm.email}"}, createdon: { _gte: "${dateTimeFrom}", _lte: "${dateTimeTo}" }},
                order_by: {id: asc},
                limit: ${_self.pageOptions.pageSize},
                offset: ${_self.pageOptions.pageSize * (_self.pageOptions.currentPage - 1)}
              )
          {
            id
            event
            userid
            email
            createdon
          }
        }`
      this.$interface.graphutil.Request(params).then((data) => {
        _self.dataList = data.data.data.event
        _self.dataListLoading = false
      })
    },
    getDatCount (dateTimeFrom, dateTimeTo) {
      var _self = this

      const params = `
        query MyQuery {
          event_aggregate(where: { email: {_eq: "${_self.dataForm.email}"}, createdon: { _gte: "${dateTimeFrom}", _lte: "${dateTimeTo}" }}) {
            aggregate {
              count
            }
          }
        }`

      this.$interface.graphutil.Request(params).then((data) => {
        _self.pageOptions.total = data.data.data.event_aggregate.aggregate.count
      })
    },
    reply () {
      const events = []

      this.dataList.forEach(item => {
        try {
          var event = JSON.parse(decodeURIComponent(atob(item.event)))

          if (event) {
            events.push(event)
          }
        } catch (error) {

        }
      })

      // this.replayer = new RRwebPlayer({
      //   target: document.getElementById('rrweb-player'),
      //   data: {
      //     events,
      //     autoPlay: true
      //   }
      // })
    }
  }
}
</script>
